<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="assets/pwaicons/ios/256.png">
    <meta property="og:image" content="assets/pwaicons/ios/256.png">
    <meta name="viewport" content="width=device-width,initial-scale=0.9">
    <meta name="vertex-theme" content="VERTEX-THEME">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body style="margin: 0;" class="body-bg">
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
    </div>
  </body>
  <link rel="stylesheet/less" type="text/css" href="/assets/styles/theme.less" >
  <script>
    let customVH = window.innerHeight * 0.01
    document.documentElement.style.setProperty('--vh', customVH + 'px');
    window.addEventListener('resize', () => {
      let customVH = window.innerHeight * 0.01
      document.documentElement.style.setProperty(
        '--vh',
        customVH + 'px',
      )
    });
    if (document.querySelector('meta[name=vertex-theme]').content === 'follow') {
      const themeMedia = window.matchMedia('(prefers-color-scheme: light)');
      if (themeMedia.matches) {
        document.querySelector('meta[name=theme-color]').content = '#0099E3';
      } else {
        document.querySelector('meta[name=theme-color]').content = '#000000';
      }
      themeMedia.addListener(e => {
        if (e.matches) {
          document.querySelector('meta[name=theme-color]').content = '#0099E3';
          if (window.location.pathname === '/user/login') {
            document.querySelector('body').style.backgroundColor = '#fff';
          }
        } else {
          document.querySelector('meta[name=theme-color]').content = '#000000';
          if (window.location.pathname === '/user/login') {
            document.querySelector('body').style.backgroundColor = '#000';
          }
        }
      });
      if (
        document.querySelector('meta[name=theme-color]').content === '#0099E3' &&
        window.location.pathname === '/user/login'
      ) {
        document.querySelector('body').style.backgroundColor = !themeMedia.matches ? '#000' : '#fff';
      }
    }
    if (document.querySelector('meta[name=vertex-theme]').content === 'light') {
      if (['/user/login'].indexOf(window.location.pathname) !== -1) {
        document.querySelector('body').style.backgroundColor = '#fff';
      }
    }
    if (document.querySelector('meta[name=vertex-theme]').content === 'cyber') {
      document.querySelector('meta[name=apple-mobile-web-app-status-bar-style]').content='default'
    }
  </script>
</html>
